<template>
  <div class="examination">
    <div>
      <!-- 题目 -->
      <van-radio-group v-model="single_key[i]" v-if="falg1" :disabled="disabled">
        <h4>单选题</h4>
        <p class="corresize">第 {{ itemS + 1 }} 题 {{ single[i]['single_name'] }}</p>
        <van-cell-group>
          <van-cell :title="'A : ' + single[i]['A']" clickable @click="radio = 'A'">
            <template #right-icon>
              <van-radio name="A" />
            </template>
          </van-cell>
          <van-cell :title="'B : ' + single[i]['B']" clickable @click="radio = 'B'">
            <template #right-icon>
              <van-radio name="B" />
            </template>
          </van-cell>
        </van-cell-group>
        <van-cell-group>
          <van-cell :title="'C : ' + single[i]['C']" clickable @click="radio = 'C'">
            <template #right-icon>
              <van-radio name="C" />
            </template>
          </van-cell>
          <van-cell :title="'D : ' + single[i]['D']" clickable @click="radio = 'D'">
            <template #right-icon>
              <van-radio name="D" />
            </template>
          </van-cell>
        </van-cell-group>
        <div v-show="dashow1" class="dashow">
          <!-- <div>回答: {{ sum }}</div> -->
          <div>参考答案 : {{ single_right_key[i] }}</div>
        </div>
      </van-radio-group>
      <!-- 多选 -->
      <van-checkbox-group v-model="selection_key[i]" v-else-if="falg2" :disabled="disabled">
        <h4>多选题</h4>
        <p class="corresize">第 {{ itemS + 1 }} 题 {{ selection[i]['selection_name'] }}</p>

        <van-cell :title="'A : ' + selection[i]['A']" clickable @click="radios = 'A'">
          <template #right-icon>
            <van-checkbox name="A" />
          </template>
        </van-cell>
        <van-cell :title="'B : ' + selection[i]['B']" clickable @click="radios = 'B'">
          <template #right-icon>
            <van-checkbox name="B" />
          </template>
        </van-cell>
        <van-cell :title="'C : ' + selection[i]['C']" clickable @click="radios = 'C'">
          <template #right-icon>
            <van-checkbox name="C" />
          </template>
        </van-cell>
        <van-cell :title="'D : ' + selection[i]['D']" clickable @click="radios = 'D'">
          <template #right-icon>
            <van-checkbox name="D" />
          </template>
        </van-cell>

        <div v-show="dashow2" class="dashow">
          <!-- <div>回答:</div> -->
          <div>参考答案 : {{ selection_right_key[i] }}</div>
        </div>
      </van-checkbox-group>
      <!-- 判断 -->
      <van-radio-group v-model="judge_key[i]" v-else-if="falg3" :disabled="disabled">
        <h4>判断题</h4>
        <p class="corresize">第 {{ itemS + 1 }} 题 {{ judge[i]['judge_name'] }}</p>
        <van-cell-group>
          <van-cell title="对">
            <template #right-icon>
              <van-radio name="0" />
            </template>
          </van-cell>
          <van-cell title="错">
            <template #right-icon>
              <van-radio name="1" />
            </template>
          </van-cell>
        </van-cell-group>
        <div v-show="dashow3" class="dashow">
          <!-- <div>回答:</div> -->
          <div>参考答案 : {{ judge_right_key[i] == 0 ? '对' : '错' }}</div>
        </div>
      </van-radio-group>
      <!-- 操作题 -->
      <div v-else-if="falg4">
        <h4>操作题</h4>
        <p class="corresize">第 {{ itemS + 1 }} 题 {{ operation[i]['operation_name'] }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { Checkbox, CheckboxGroup } from 'vant'
import { RadioGroup, Radio } from 'vant'
import { Pagination } from 'vant'

export default {
  name: 'examination',
  props: ['single', 'selection', 'judge', 'operation', 'single_keys', 'selection_keys', 'judge_keys', 'disabled', 'single_right_keys', 'selection_right_keys', 'judge_right_keys'],
  data() {
    return {
      sum: '',
      dashow1: false,
      dashow2: false,
      dashow3: false,
      // 参考答案
      single_right_key: [],
      selection_right_key: [],
      judge_right_key: [],
      // 不同题型
      falg1: true,
      falg2: false,
      falg3: false,
      falg4: false,
      // 题目下标
      i: 0,
      // 题数
      itemS: 0,
      // 保存数据
      single_key: [],
      selection_key: [],
      judge_key: [],
      operation_key: [],
      // 选答案
      result: [],
      radio: [],
      radios: []
    }
  },
  methods: {
    //items
    onitems() {
      let arr = this.itemS
      return arr
    },
    // 上一题
    upItem() {
      if (this.itemS == 0) {
        this.i = 0
        this.itemS = 0
        Toast('已经是第一题了')
      } else {
        this.i -= 1
        this.itemS -= 1
      }

      if (this.itemS < this.single.length) {
        this.i = this.itemS
        this.falg2 = this.falg3 = this.falg4 = false
        this.falg1 = true
        // console.log(this.i + ',' + this.itemS)
      }
      if (this.itemS >= this.single.length && this.itemS < this.single.length + this.selection.length) {
        this.i = this.itemS - this.single.length
        this.falg1 = this.falg3 = this.falg4 = false
        this.falg2 = true
        // console.log(this.i + ',' + this.itemS)
      }
      if (this.itemS >= this.single.length + this.selection.length && this.itemS < this.single.length + this.selection.length + this.judge.length + this.operation.length) {
        this.i = this.itemS - this.single.length - this.selection.length
        this.falg1 = this.falg2 = this.falg4 = false
        this.falg3 = true
        // console.log(this.i + ',' + this.itemS)
      }
    },
    // 下一题
    nexItem() {
      this.i += 1
      this.itemS += 1
      if (this.itemS >= this.single.length && this.itemS < this.single.length + this.selection.length) {
        this.falg1 = this.falg3 = this.falg4 = false
        this.falg2 = true
        if (this.i >= this.single.length) {
          this.i -= this.single.length
        }
        // console.log(this.i)
      }
      if (this.itemS >= this.single.length + this.selection.length && this.itemS < this.single.length + this.selection.length + this.judge.length) {
        this.falg1 = this.falg2 = this.falg4 = false
        this.falg3 = true
        if (this.i >= this.single.length) {
          this.i -= this.single.length
        }
        // console.log(this.i)
      }
      if (this.operation == '') {
        if (this.itemS >= this.single.length + this.selection.length + this.judge.length) {
          this.itemS -= 1
          this.i -= 1
          Toast('已经是最后一题了')
        }
      } else {
        if (this.itemS >= this.single.length + this.selection.length + this.judge.length && this.itemS < this.single.length + this.selection.length + this.judge.length + this.operation.length) {
          this.falg1 = this.falg2 = this.falg3 = false
          this.falg4 = true
          if (this.i >= this.judge.length) {
            this.i -= this.judge.length
            // console.log(this.i)
          }
        }
        if (this.itemS >= this.single.length + this.selection.length + this.judge.length + this.operation.length) {
          this.itemS -= 1
          this.i -= this.operation.length
          Toast('已经是最后一题了')
        }
      }
    },
    // 返回选择的答案
    onexamda() {
      let arr = [this.single_key, this.selection_key, this.judge_key, this.operation_key]
      return arr
    },
    // 返回当前所在类型
    onleixing() {
      let arr = [this.falg1, this.falg2, this.falg3, this.i]
      return arr
    },
    // 判断显示隐藏 选题的相关方法
    showflag() {
      if (this.itemS >= 0 && this.itemS < this.single.length) {
        this.falg1 = true
        this.falg2 = this.falg3 = this.falg4 = false
      }
      if (this.itemS >= this.single.length && this.itemS < this.single.length + this.selection.length) {
        this.falg2 = true
        this.falg1 = this.falg3 = this.falg4 = false
      }
      if (this.itemS >= this.single.length + this.selection.length && this.itemS < this.single.length + this.selection.length + this.judge.length) {
        this.falg3 = true
        this.falg1 = this.falg2 = this.falg4 = false
      }
      if (this.itemS >= this.single.length + this.selection.length + this.judge.length && this.itemS < this.single.length + this.selection.length + this.judge.length + this.operation.length) {
        this.falg4 = true
        this.falg1 = this.falg2 = this.falg3 = false
      }
    },
    // 选题跳转
    // 单
    singl(e) {
      this.i = this.itemS = ''
      this.i = e
      this.itemS = e
      this.showflag()
    },
    // 多
    selec(e) {
      this.i = this.itemS = ''
      this.itemS = e + this.single.length
      this.i = e
      this.showflag()
    },
    //判断
    judgs(e) {
      this.i = this.itemS = ''
      this.itemS = e + this.single.length + this.selection.length
      this.i = e
      this.showflag()
    },
    // 操作
    opers(e) {
      this.i = this.itemS = ''
      this.itemS = e + this.single.length + this.selection.length + this.judge.length
      this.i = e
      this.showflag()
    },
    // 提交考试时判断有无值
    ondate(oi, oitems, f1, f2, f3, f4) {
      this.i = oi
      this.itemS = oitems
      this.falg1 = f1
      this.falg2 = f2
      this.falg3 = f3
      this.falg4 = f4
    },
    // 错题页面有数据调用的方法
    async getsingle_keys() {
      this.single_key = JSON.parse(`${this.single_keys} `)
      this.single_right_key = this.single_right_keys
      this.dashow1 = true
    },
    async getselection_keys() {
      this.selection_key = JSON.parse(`${this.selection_keys} `)
      this.selection_right_key = this.selection_right_keys
      this.dashow2 = true
    },
    async getjudge_keys() {
      this.judge_key = JSON.parse(`${this.judge_keys} `)
      this.judge_right_key = this.judge_right_keys
      this.dashow3 = true
    }
  },
  watch: {
    // 监听父组件是否有传值 错题的数据渲染
    single_keys() {
      this.getsingle_keys()
    },
    selection_keys() {
      this.getselection_keys()
    },
    judge_keys() {
      this.getjudge_keys()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.corresize {
  font-size: 12px;
}
h4 {
  font-size: 14px;
}
.dashow {
  font-size: 12px;
}
</style>
